<template>
<!-- 排行榜 -->
    <div class="singerlist">
        <div class="singer-top">
            <!-- 图片 -->
            <div class="singer-img">
                <span class="iconfont icon-arrow-left-bold singer-span1" @click="$router.go(-1)"></span>
                <img :src="artist.img1v1Url" alt="">
                <span class="singer-span2">{{artist.name}}</span>
            </div>
            <!-- 描述 -->
            <div class="singer-txt">
               
                <van-collapse v-model="activeNames">
                <van-collapse-item title="专辑描述" name="1"> {{artist.briefDesc}}</van-collapse-item>
                
                </van-collapse>
            </div>
        </div>
        <div>

        <van-tabs v-model="active" animated class="van-box">
        <van-tab v-for="(item,index) in listsTracks" :key="item.id" >
            <template #title> <van-icon name="more-o" />{{index+1}} {{item.name}}</template>
            <div class="van-dd">

            <div class="imgs" :style="'background-image:url('+item.al.picUrl+');'"></div>
                <div class="info">
                    <h2>{{item.name}}</h2>
                    <h3>
                        <span >{{item.al.name}}&nbsp;</span>
                    </h3>
                </div>
                <div class="click-dd" @click="setId(item.id,listsTracks)" >
                <i :class="['fa' ,'fa-youtube-play',indexs==index ? 'active':'']" aria-hidden="true"></i>

                </div>
            </div>
        </van-tab>
        </van-tabs>
        
        </div>
        <dl class="musicList">
            <dt>
                
            专辑列表 
            </dt>
            <dd v-for="(item,index) in listsTracks" :key="item.id" v-show="index<5" >
                <div class="imgs" :style="'background-image:url('+item.al.picUrl+');'"></div>
                <div class="info">
                    <h2>{{item.name}}</h2>
                    <h3>
                        <span >{{item.al.name}}&nbsp;</span>
                    </h3>
                </div>
                <div class="click-dd" @click="setId(item.id,listsTracks)" >
                <i :class="['fa' ,'fa-youtube-play',indexs==index ? 'active':'']" aria-hidden="true"></i>

                </div>
            </dd>
        </dl>
        <!-- Swiper -->
            <div class="swiper-btn">
                <span>相似歌手</span>

            </div>
        <div class="swiper-singerlist">
            <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-div" v-for="(item,index) in simiArtists" :key="index">
                <div class="swiper-item-img">
                        <img :src="item.picUrl" alt="" @click.stop="updataArtist(item.id)">
                        <div class="swiper-item-div">
                            <p class="zh-name">{{item.name}}</p>
                            <p class="en-name">{{item.alias[0]}} </p>
                        </div>
                </div>
            </div>
            
            </div>
            
        </div>
    </div>
</template>

<script>
    import {getArtists,getSimiArtist} from "../../api/listen";
    import Swiper from "swiper";
    export default {
      name: 'SingerList',
        data() {
            return {
               id :null, //listen组件传的id
               listsTracks:[], //歌曲数据
               artist: {}, //歌手图片数据
               activeNames: ['1'],
               indexs:null, //高亮点击按钮的标志
               active:1,
               simiArtists:[],//相似歌手id
            }
        },
        // mounted() {
        //     this.$nextTick(()=>{
        //         this.swiperlist();
        //     })
        // },
        created(){
            //截取listen组件传递的id
            this.id=this.$route.query.id;
            this.getArtistsFun();
            this.getSimiArtistFun();
        },
        methods:{
            //请求歌手歌曲数据
           getArtistsFun() {
            getArtists({id:this.id}).then(data=>{
            this.listsTracks=data.hotSongs;
            this.artist=data.artist;
            }).catch(err=>{
            
            })
           },
           
            // 点击播放
             setId(id,item){
                 let index= item.findIndex(item=> item.id==id );
                 
                 this.indexs=index;
                // 子传父 调用父组件的方法
                this.$emit("get-player-id",id);
            },
            //获取相似歌手
            getSimiArtistFun() {
                getSimiArtist({id:this.id}).then(data=>{
                    // 相似歌手数据
                    this.simiArtists=data.artists;
                    //调用轮播图插件
                    this.swiperlist();
                })
            },
            //点击相似歌手图片
            updataArtist(id) {
                this.id=id;
                this.indexs=null;
                this.getArtistsFun();
            },
            //引入swiper实例
            swiperlist() {
                 new Swiper('.swiper-singerlist', {
                    autoPlay:{
                    disableOnInteraction: false,
                    },
                    observer:true, //修改swiper自己或者子元素,自动初始化swiper
                    observerParents:true,//修改swiper的父元素时,自动初始化swiper
                    // paginationClickable:true,
                　　// 这样，即使我们滑动之后， 定时器也不会被清除
                　　autoplayDisableOnInteraction : false,
                    slidesPerView: 3,
                    spaceBetween: 30,
                    centeredSlides: true,
                    loop: true,
                    
                });
            }
        }
    }
</script>

<style lang="less" scoped>
.singerlist {
    .singer-top {
        .singer-img{
            width:100%;
            height:322px;
            position:relative;
            img{
                width:100%;
                display: block;
                height:auto;
            }
            .singer-span1{
                position: absolute;
                top:15px;
                left:10px;
                font-size: 28px;
                color:#DB9A9D;
            }
            .singer-span2{
                position: absolute;
                bottom:-5px;
                right:150px;
                padding: 10px 20px;
                background-color: rgba(90,94,111,0.9);
                color:#fff;
                border-radius: 20px;
                font-size:14px;
            }
        }
        .singer-txt{
            margin-top: 10px;
            font-size:16px;
        }

    }
      .musicList{
        background-color: #fff;
        width: 100%;
        border-radius: 7px;
        position: relative;
        top:-7px;
        dt{
            height: 36px;
            line-height: 36px;
            padding: 0 20px;
            font-size: 16px;
            color:#454747;
            border-bottom: 1px solid #E3E3E3;
            span{
                background-color: #929393;
                border-radius: 10px;
                font-size: 14px;
                float: right;

                color:#fff;
            }
            i{
                width: 44px;
                text-align: center;
                display: inline-block;
            }
        }
        dd{
            border-bottom: 1px solid #E3E3E3;
            height: 100px;
            display: flex;
            align-items: center;
            .imgs{
                flex: 0 0 100px;
                height:90px;
                margin-right: 20px;
                border-radius: 10px;
                background-repeat: no-repeat;
                background-size:cover;
                background-position: center center;
            }
            .info{
                flex:1;
                h2{
                    font-size: 16px;
                    color:#1B1C1C;
                    margin-top: 10px;
                    text-align: left;
                    padding:5px 0;

                }
                h3{
                    font-size: 14px;
                    color:#929393;
                    text-align: left;
                    padding:5px 0;

                }
            }
            .click-dd{
                width: 35px;
                font-size: 22px;
                margin-right: 10px;
                color:#cdc9dc;
                i.active{
                color:#e4393c!important;
                }
            }
        }
    }
}

.van-box{
    touch-action: none;
}
//抽取
.van-dd{
    border-bottom: 1px solid #E3E3E3;
    height: 100px;
    display: flex;
    align-items: center;
    margin: 15px;
    border-radius: 10px;
    background-color: rgba(90,94,111,0.1);

.imgs{
                flex: 0 0 100px;
                height:90px;
                margin-right: 20px;
                margin-left: 20px;
                border-radius: 10px;
                background-repeat: no-repeat;
                background-size:cover;
                background-position: center center;
            }
            .info{
                flex:1;
                h2{
                    font-size: 16px;
                    color:#1B1C1C;
                    margin-top: 10px;
                    text-align: left;
                    padding:5px 0;

                }
                h3{
                    font-size: 14px;
                    color:#929393;
                    text-align: left;
                    padding:5px 0;

                }
            }
            .click-dd{
                width: 35px;
                font-size: 22px;
                margin-right: 10px;
                color:#cdc9dc;
                i.active{
                color:#e4393c!important;
                }
            }
}
 .swiper-btn{
        display: flex;
        justify-content: center;
        font-size: 16px;
        font-weight:bold;
        span{
            padding:5px 10px;
        }
    }
//相似歌手
.swiper-singerlist{
    height: 220px;
    width:100%;
    touch-action: none;
    overflow: hidden;
    .swiper-slide-div{
        width:33.33%;
    }
   
    .swiper-item-img{
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        img{
            border-radius: 50%;
        }
        .swiper-item-div{
            font-size:14px;
            padding: 5px 0;
            p{
                padding: 5px 0;
            }
        }
    }

}
.swiper-singerlist {
      width: 100%;
      height: 220px;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1.2);
	}
</style>